import { Modal } from "antd";
import React, { useState,useEffect } from "react";
import { getBadRecordDetail } from "@/services/bad/index";
import { Form } from 'antd';
import { Input,DatePicker,Select } from 'antd';
const {TextArea } = Input;
import dayjs from 'dayjs';
const dateFormat = 'YYYY-MM-DD';
const EditForm: React.FC<{ open: boolean; onCancel: () => void; onOk: (values: any) => void; isEdit: boolean; recordObj?: any }> = (props) => {
  const { open, onCancel, onOk, isEdit, recordObj } = props;
  const [isShow, setIsShow] = useState(false);
  const title = isEdit ? '编辑不良记录' : '新增不良记录'
  const [form] = Form.useForm();
  useEffect(() => {
    setIsShow(open)
    if(isEdit && recordObj?.id){
      // 直接使用父组件传递的记录数据，而不是重新获取
      getBadRecordDetail({id:recordObj.id}).then((res)=>{

        form.setFieldsValue({
          ...res.data,
          startTime: res.data.startTime ? dayjs(res.data.startTime) : null,
          endTime: res.data.endTime ? dayjs(res.data.endTime) : null,
          id:res.data.id,
        })
      })
    }else{
      // 新增模式下清空表单
      form.resetFields();
    }
  }, [open, isEdit, recordObj])
  const handleFinish = async (values: any) => {
    form.validateFields().then((valid) => {
      const formatValues = {
        ...valid,
        startTime: valid.startTime?.format ? valid.startTime.format(dateFormat) : valid.startTime,
        endTime: valid.endTime?.format ? valid.endTime.format(dateFormat) : valid.endTime,
      }
      onOk(formatValues);
      form.resetFields()
    })
  }
 const handleCancel = () => {
    // console.log('form,',form);
    onCancel();
    form.resetFields()

  }
  const formItemLayout = {
  labelCol: {
    xs: { span: 8 },
    sm: { span: 4 },
  },

};

  return (
    <div>
      <Modal title={title} open={open} onCancel={handleCancel} onOk={handleFinish}>
        <Form form={form} labelAlign="right" layout="horizontal" {...formItemLayout} >
          <Form.Item name="id" noStyle />
           <Form.Item
              label="单位名称"
              name="companyName"
              rules={[{ required: true, message: '请输入单位名称' }]}
            >
      <Input />
    </Form.Item>
    <Form.Item
              label="不良类型"
              name="recordType"
              rules={[{ required: true, message: '请输入不良类型' }]}
            >
      <Input />
    </Form.Item>
     <Form.Item
              label="备注"
              name="description"
              rules={[{ required: true, message: '请输入备注' }]}
            >
      <TextArea autoSize/>
    </Form.Item>
     <Form.Item
              label="状态"
              name="status"
              rules={[{ required: true, message: '请选择状态' }]}
            >
      <Select
      defaultValue="已关闭"
     style={{width: '100%'}}

      options={[{ value: '已关闭', label: '已关闭' },{ value: '进行中', label: '进行中' },{value:'已解决',label:'已解决'}]}
    />
    </Form.Item>
    <Form.Item
              label="开始时间"
              name="startTime"

              rules={[{ required: true, message: '请选择开始时间' }]}
            >
      <DatePicker format={dateFormat} style={{width: '100%'}}/>
    </Form.Item>
      <Form.Item
              label="结束时间"
              name="endTime"
              rules={[{ required: true, message: '请选择结束时间' }]}
            >
      <DatePicker  format={dateFormat} style={{width: '100%'}}/>
    </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default EditForm;
